
//less中的单行注释，注释的内容不会被解析到css中

/*
css中的注释内容会被解析到css文件中
*/
.box1{
    background-color: #bfa;

    .box2{
        background-color: green;

        .box4{
            background-color: blue;
        }
    }

    .box3{
        background-color: red;
    }
}
 

//变量，在变量中可以存储任意一个值
//并且在需要时任意修改变量的值

//变量语法  @变量名

@a:100px;
@b:#bfa;
@c:box6;
.box5{
    // 使用变量使，如果直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
}

// 作为类名使用，或者一部值使用时 以@{变量名}的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.jpg");
}

@d:200px;
@d:300px;

div{
    // 变量名发生重名时，会优先使用比较近的变量
    @d:115px;
    width: @d;
    height: @e;
}

// 可以在变量声明前就使用变量
@e:335px;

div{

    width: 300px;
    // 新版的语法
    height: $width;
}